<template>
    <div style="height: 100%;">
        <div class="columnBg">
            <van-form ref="form">
                <van-field label="领用人员：" v-model="formData.ssryname" readonly placeholder="请选择领用人员" required
                    :rules="rules.ssryname">
                    <template #button>
                        <a size="small" type="info" @click="selectUser">选择人员</a>
                    </template>
                </van-field>

                <van-field label="楼宇信息：" v-model="formData.fangcName" readonly placeholder="请选择楼宇信息" required
                    :rules="rules.fangcName">
                    <template #button>
                        <a size="small" type="info" @click="selectbuilding">选择楼宇</a>
                    </template>
                </van-field>

                <van-field label="楼层信息：" v-model="formData.loucName" :disabled="false" placeholder="请选择楼层信息">
                    <template #button>
                        <a size="small" type="info" @click="selectFloor">选择楼层</a>
                    </template>
                </van-field>

                <van-field label="房间信息：" v-model="formData.fangjName" :disabled="false" placeholder="请选择房间信息">
                    <template #button>
                        <a size="small" type="info" @click="selectRoom">选择房间</a>
                    </template>
                </van-field>
            </van-form>
            <div class="followerBox">
                <h5 @click="isFold = !isFold;">
                    办公物资列表（{{ listData.length }}）
                    <p v-if=" isFold ">展开 <van-icon name="arrow-down" /></p>
                    <p v-else>折叠 <van-icon name="arrow-up" /></p>
                    <van-button size="mini" round type="info" icon="plus" @click=" handleAdd "></van-button>
                </h5>
                <div v-show=" !isFold " class="list">
                    <div v-for="(  val, ind  ) in   listData  " :key= ind  class="list-item">
                        <div class="right">
                            <div class="iconClose">
                                <van-icon name="close" size="18" color="#ee0a24" @click=" handleDelete(val, ind) " />
                            </div>
                            <div>
                                <label>物资大类：</label>
                                <p>{{ val.wzdlName || "-" }}</p>
                            </div>
                            <div>
                                <label>物资小类：</label>
                                <p>{{ val.wzxlName || "-" }}</p>
                            </div>
                            <div>
                                <label>品名：</label>
                                <p>{{ val.PINM || "-" }}</p>
                            </div>
                            <div>
                                <label>数量：</label>
                                <p></p>
                                <van-stepper v-model=" val.SHUL " input-width="40px" min="0" :max=" val.stockAmount "
                                    integer />
                            </div>
                        </div>
                        <!-- <van-button plain color="#ee0a24" @click="handleDelete(ind)">删除</van-button> -->
                    </div>
                    <van-empty v-if=" !listData.length " class="custom-image"
                        :image=" require('../../../assets/images/empty.png') " description="暂无办公物资" />
                </div>
            </div>
            <van-button class="defaultBtn" size="large" color="#4eb3e9" @click=" handleSave ">提交</van-button>
        </div>

        <fullscreenModal :modal=" fullscreenModal " :editType=" 'other' " label="选择办公物资" :showSubmit=" false "
            :showSave=" false " @handleClose=" fullscreenModal = false ">
            <article-form @close=" fullscreenModal = false " ref="articleForm" @restLsit=" restLsit " @addList=" addList "
                @goBack=" fullscreenModal = false " />
        </fullscreenModal>

        <fullscreenModal :modal=" chooseUserModal " :editType=" 'other' " label="选择人员" :showSubmit=" false "
            :showSave=" false " @handleClose=" chooseUserModal = false ">

            <choose-user-form ref="chooseUserForm" @close=" chooseUserModal = false " @changUser=" chooseUser " />
        </fullscreenModal>
        <!-- 选择楼宇-->
        <fullscreenModal :modal=" chooseBuildingModal " :editType=" 'other' " label="选择楼宇" :showSubmit=" false "
            :showSave=" false " @handleClose=" chooseBuildingModal = false ">
            <choosebuilding-form ref="choosebuildingForm" @close=" chooseBuildingModal = false "
                @changeBuilding=" chooseBuilding " />
        </fullscreenModal>
        <!-- 选择楼层 -->
        <fullscreenModal :modal=" chooseFloorModal " :editType=" 'other' " label="选择楼层" :showSubmit=" false "
            :showSave=" false " @handleClose=" chooseFloorModal = false ">
            <choose-floor-form ref="chooseFloorForm" @close=" chooseFloorModal = false " @chooseFloor=" chooseFloor " />
        </fullscreenModal>
        <!-- 选择房间 -->
        <fullscreenModal :modal=" chooseRoomModal " :editType=" 'other' " label="选择房间" :showSubmit=" false "
            :showSave=" false " @handleClose=" chooseRoomModal = false ">
            <choose-room-form ref="chooseRoomForm" @close=" chooseRoomModal = false " @chooseRoom=" chooseRoom " />
        </fullscreenModal>
    </div>
</template>

<script>
import { saveBgwz } from "@/api/srvAssurance/assetLabel/assetLabel";
import { queryDic } from '@/api/common';
import articleForm from "./articleForm.vue";
import chooseUserForm from "./chooseUser.vue";
import choosebuildingForm from "./choosebuilding.vue";
import chooseFloorForm from "./chooseFloor.vue";
import chooseRoomForm from "./chooseRoom.vue";
export default {
    components: {
        articleForm,
        chooseUserForm,
        choosebuildingForm,
        chooseFloorForm,
        chooseRoomForm
    },
    data() {
        return {
            fullscreenModal: false,
            isFold: true,
            chooseUserModal: false,
            chooseBuildingModal: false,
            chooseFloorModal: false,
            chooseRoomModal: false,
            chooseUserInfo: {},
            formData: {
                type: 'add',
                id: '',
                danh: '',
                shenqr: '',
                suosry: '',
                shenqsj: '',
                shenqzt: '',
                isdelete: '',
                louyxx: '',
                loucId: '',
                loucName: '',
                roomId: '',
                corpid: '',
                fangjName: '',
                ssryname: '',
                fangcName: '',
            },
            dlList: '',
            wzxlList: '',
            rules: {
                ssryname: [
                    { required: true, message: '请选择领用人', trigger: 'change' },
                ],
                fangcName: [
                    { required: true, message: '请选择楼宇', trigger: 'change' },
                ],
            },
            listData: [],
        };
    },
    created() {
        this.getDicData();
    },
    methods: {
        restLsit(val) {
            this.listData = val
        },
        addList(val) {
            this.listData = val
        },
        //选择人员
        selectUser() {
            this.chooseUserModal = true
            this.$refs.chooseUserForm.onRefresh();
        },
        chooseUser(val) {
            this.formData.ssryname = val.NAME
            this.formData.suosry = val.staff_id
        },
        //选择楼宇
        selectbuilding() {
            this.chooseBuildingModal = true
            this.$refs.choosebuildingForm.onRefresh();
        },
        chooseBuilding(val) {
            this.formData.fangcName = val.FANGCNAME
            this.formData.louyxx = val.ID
        },
        //选择楼层
        selectFloor() {
            if (this.formData.louyxx == null || this.formData.louyxx == '') {
                this.$Notify({ type: 'warning', message: "请选择楼宇！" });
                return
            }
            this.chooseFloorModal = true;
            this.$refs.chooseFloorForm.louyid = this.formData.louyxx;
            this.$refs.chooseFloorForm.onRefresh();
        },
        chooseFloor(val) {
            this.formData.loucName = val.NAME
            this.formData.loucId = val.ID
        },
        //选择房间
        selectRoom() {
            if (this.formData.louyxx == null || this.formData.louyxx == '') {
                this.$Notify({ type: 'warning', message: "请选择楼宇！" });
                return
            }
            this.chooseRoomModal = true;
            if (this.formData.loucName == null || this.formData.loucName == '') {
                this.$refs.chooseRoomForm.louyid = this.formData.louyxx;
                this.$refs.chooseRoomForm.idType = "ly";
            } else {
                this.$refs.chooseRoomForm.louyid = this.formData.loucId;
                this.$refs.chooseRoomForm.idType = "lc";
            }

            this.$refs.chooseRoomForm.onRefresh();
        },
        chooseRoom(val) {
            this.formData.fangjName = val.NAME
            this.formData.roomId = val.ID
        },
        // 提交
        handleSave() {
            let isBoo = false;
            this.$refs.form.validate().then(async () => {
                if (this.listData.length < 1) {
                    this.$Notify({ type: 'warning', message: "申请办公物资不能为空！" });
                    isBoo = true;
                }
                this.listData.forEach(item => {
                    if (item.SHUL == "0" || item.SHUL == null) {
                        this.$Notify({ type: 'warning', message: "申请数量不能为0！" });
                        isBoo = true;
                    }
                })
                if (isBoo) {
                    return
                };
                var wuzdl = "";
                var wuzxl = "";
                var pinm = "";
                var shul = "";
                this.listData.forEach(item => {
                    var wuzdla = item.WUZDL + ",";
                    var wuzxla = item.WUZXL + ",";
                    var pinma = item.PINM + ",";
                    var shula = item.SHUL + ",";
                    wuzdl = wuzdl + wuzdla;
                    wuzxl = wuzxl + wuzxla;
                    pinm = pinm + pinma;
                    shul = shul + shula;

                })
                let resData = {
                    id: this.formData.id,
                    danh: this.formData.danh,
                    shenqr: this.formData.shenqr,
                    suosry: this.formData.suosry,
                    shenqsj: this.formData.shenqsj,
                    shenqzt: this.formData.shenqzt,
                    corpid: this.formData.corpid,
                    isdelete: '0',
                    louyxx: this.formData.louyxx,
                    loucxx: this.formData.loucId,
                    loucName: this.formData.loucName,
                    fangjxx: this.formData.roomId,
                    fangjName: this.formData.fangjName,
                    wuzdl: wuzdl,
                    wuzxl: wuzxl,
                    pinm: pinm,
                    shul: shul,
                    type: this.formData.type
                };
                console.log("save", resData);
                saveBgwz(resData).then(res => {
                    this.$Notify({ type: "success", message: "保存成功！" });
                    this.$emit("close");
                    this.$emit("refresh");
                })
            })
        },
        // 查询原本集合信息
        getData(obj) {
            console.log("obj", obj);
            this.formData.type = 'edit';
            this.isEdit = true;
            this.formData.id = obj.ID;
            this.formData.danh = obj.DANH;
            this.formData.shenqr = obj.SHENQR;
            this.formData.shenqsj = obj.SHENQSJ;
            this.formData.suosry = obj.SUOSRY;
            this.formData.shenqzt = obj.SHENQZT;
            this.formData.isdelete = '0';
            this.formData.corpid = obj.CORPID;
            this.formData.fangcName = obj.FANGCNAME;
            this.formData.loucName = obj.LOUCNAME;
            this.formData.loucId = obj.LOUCXX;
            this.formData.fangjName = obj.FANGJNAME;
            this.formData.ssryname = obj.SSRYNAME;
            this.formData.louyxx = obj.LOUYXX;
            this.formData.roomId = obj.FANGJXX;
            this.listData = obj.dtailList
            this.translate()
        },
        translate() {
            this.listData.forEach(item => {
                this.dlList.some(val => {
                    if (val.codeValue === item.WUZDL) {
                        this.$set(item, 'wzdlName', val.valueAlias);
                        return true
                    }
                })
                this.wzxlList.some(val => {
                    if (val.codeValue === item.WUZXL) {
                        this.$set(item, 'wzxlName', val.valueAlias);
                        return true
                    }
                })
            });
        },
        // 添加
        handleAdd(e) {
            this.fullscreenModal = true;
            this.$refs.articleForm.removeLsit = this.listData;
            this.$refs.articleForm.onRefresh();
        },
        // 删除
        handleDelete(index) {
            this.listData.splice(index, 1);
        },
        // 重置
        resetForm() {
            this.isFold = true;
            this.formData = {
                type: 'add',
                id: '',
                danh: '',
                shenqr: '',
                suosry: '',
                shenqsj: '',
                shenqzt: '',
                isdelete: '',
                louyxx: '',
                loucId: '',
                loucName: '',
                roomId: '',
                corpid: '',
                fangjName: '',
                ssryname: '',
                fangcName: '',
            };
            this.listData = [];
            setTimeout(() => {
                this.$refs.form.resetValidation();
            })
        },
        getDicData() {
            //大类
            queryDic('RA_WORK_FACILITYBIG_CODE').then(res => {
                if (res.code == 1000) {
                    this.dlList = res.data
                }
            })
            //小类
            queryDic('RA_WORK_FACILITYSMALL_CODE').then(res => {
                if (res.code == 1000) {
                    this.wzxlList = res.data
                }
            })
        }
    },
};
</script>

<style scoped lang="less">
.columnFlex {
    overflow: auto;
    background: #eee;
}

.van-form {
    background: #fff;

    .photoRow {
        display: flex;
        align-items: center;
        padding: 8px 15px 0;
        box-sizing: border-box;
        justify-content: space-between;
        position: relative;

        .left {
            line-height: 25px;

            p:nth-of-type(2) {
                color: #999;
                font-size: 12px;
            }
        }
    }

    .photoRow::after {
        position: absolute;
        box-sizing: border-box;
        content: " ";
        pointer-events: none;
        right: 0.42667rem;
        bottom: 0;
        left: 0.42667rem;
        border-bottom: 0.02667rem solid #ebedf0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }

    /deep/.van-field__button a {
        color: #4eb3e9;
        font-size: 13px;
    }

    .van-tag {
        margin-right: 10px;
        line-height: 22px;
        padding: 0 8px;
    }
}

h5 {
    background: #f1f1f2;
    font-size: 13px;
    line-height: 42px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    font-weight: normal;
    color: #666;
    position: relative;

    /deep/.van-button--mini {
        padding: 0;
        width: 18px;
        height: 18px;
    }

    p {
        position: absolute;
        right: 45px;
    }
}

.followerBox {
    background: #fff;
    margin-top: 5px;

    h5 {
        background: #fff;
    }

    /deep/.van-empty {
        padding: 20px 0;

        .van-empty__image {
            width: 50px;
            height: 50px;
        }
    }

    .list-item {
        display: flex;
        padding: 10px;
        box-sizing: border-box;
        align-items: center;
        border-bottom: 1px solid #eee;

        img {
            width: 60px;
            height: 60px;
            margin-right: 10px;
        }

        .right {
            flex: 1;
            overflow: hidden;

            div {
                display: flex;
                line-height: 22px;
                align-items: center;
                font-size: 12px;

                label {
                    width: 105px;
                    color: #999;
                }

                p {
                    flex: 1;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }

            .iconClose {
                float: right;
            }
        }

        .van-button {
            height: 25px;
            padding: 0 10px;
            font-size: 12px;
        }
    }
}

.addFormBox {
    position: relative;

    p {
        text-align: center;
        line-height: 45px;
        font-size: 14px;
        margin-bottom: 5px;
        border-bottom: 1px solid #eee;
        color: #666;
    }

    &>div {
        padding: 0 10px;
        box-sizing: border-box;
    }

    .van-icon {
        position: absolute;
        right: 10px;
        top: 10px;
    }
}

.van-button--large {
    height: 40px;
    line-height: 40px;
    width: 95%;
    margin: 10px auto;
}

// .agreementBox {
//     display: flex;
//     font-size: 11px;
//     padding: 10px;
//     box-sizing: border-box;
//     .van-checkbox {
//         margin-right: 5px;
//     }
// }
.van-dialog {
    /deep/.van-dialog__header {
        padding: 10px 0;
    }

    .centerListBox {
        height: 180px;
        padding: 0 15px;
        line-height: 32px;
        font-size: 14px;
        overflow: auto;
        box-sizing: border-box;
        margin-bottom: 10px;

        li {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            position: relative;
            padding-right: 30px;
            box-sizing: border-box;

            .van-icon {
                position: absolute;
                font-size: 18px;
                top: 5px;
                right: 0;
                color: #4eb3e9;
            }
        }
    }
}
</style>